<template>
  <div class="num-total">
    <div class="chart-container" ref="numTotalBox">
      <a-row class="h-100p" :gutter="16">
        <a-col
          v-for="(list, listIndex) of data"
          :key="listIndex"
          :xs="24"
          :sm="8"
        >
          <a-row
            :gutter="16"
            class="w-100p h-100p"
            style="margin-left: 0; margin-right: -16px"
          >
            <a-col
              class="total-number chart-box2"
              v-for="(item, key) in list"
              :key="key"
              :span="8"
              style="border-radius: 0"
            >
              <template v-if="!item.hidden">
                <div class="number-box number">
                  <count-to
                    :start-val="item.oldVal"
                    :end-val="item.newVal"
                    :duration="3000"
                  />
                  <span class="unit"> {{ item.unit }} </span>
                </div>
                <div class="title">{{ item.title }}</div>
              </template>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  watch,
  nextTick,
  onMounted,
} from "vue";
import CountTo from "../countTo/index.vue";
import store from "../../../../store";

export default defineComponent({
  name: "ParkNumTotal",
  components: { CountTo },
  setup() {
    const state = reactive({
      numTotalBox: null,
      itemWidth: "100px",
      data: [
        {
          last_month_order_money: {
            oldVal: 0,
            newVal: 120,
            title: "上月营业额",
            unit: "元",
          },
          this_month_order_money: {
            oldVal: 0,
            newVal: 688,
            title: "本月营业额",
            unit: "元",
          },
          this_month_order_count: {
            oldVal: 0,
            newVal: 188,
            title: "本月收费笔数",
            unit: "笔",
          },
        },
        {
          yesterday_order_money: {
            oldVal: 0,
            newVal: 2089,
            title: "昨日营业额",
            unit: "元",
          },
          today_order_money: {
            oldVal: 0,
            newVal: 1780,
            title: "本日营业额",
            unit: "元",
          },
          today_order_count: {
            oldVal: 0,
            newVal: 89,
            title: "本日收费笔数",
            unit: "笔",
          },
        },
        {
          month_park_car_count: {
            oldVal: 0,
            newVal: 178,
            title: "当前月租车数量",
            unit: "辆",
          },
          month_park_car_order_money: {
            oldVal: 0,
            newVal: 17800,
            title: "月租车总收益",
            unit: "元",
          },
          time_park_car_order_money: {
            oldVal: 0,
            newVal: 12000,
            title: "临时车总收益",
            // title: "累计营业额",
            unit: "元",
          },
        },
      ],
    });

    watch(
      () => store.getters.centerControl.Park_topData,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { Park_topData } = store.getters.centerControl;
      if (Park_topData) {
        for (let key in Park_topData) {
          let data =
            state.data[0][key] || state.data[1][key] || state.data[2][key];
          if (data) {
            data.oldVal = data.newVal;
            data.newVal = Park_topData[key];
          }
        }
        state.data.forEach((v, index) => {
          for (let key in v) {
            if (!Park_topData.hasOwnProperty(key)) {
              v[key].oldVal = v[key].newVal;
              v[key].newVal = 0;
            }
          }
        })
      }
    };

    getData();

    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";
.unit {
  font-size: 1.4rem;
  margin-left: 0.5rem;
}
</style>
